MarkRemap: 将 Markdown 转成漂亮的脑图

2023-07-29 20:58| 来源: 网络整理| 查看: 265

脑图，在一些特定场合，对于思路的呈现很有帮助。因为日常的文档，主要是使用 Markdown 的文本格式书就，这个时候会比较尴尬了：需要用专门的脑图工具，重新整理一遍；因为并非整理思路，这个时候，就显得特别浪费时间。

MarkRemap 在这个时候就派上了用途。它能直接将 Markdown 转为脑图，不同 Markdown App 的解析结果可能不完全一样，MarkRemap 也可以直接将 HTML 文档转为脑图。

写作

一般来说，能转成脑图结构的，我们能想象到 Markdown 大概写作的格式是这样的:

## 节点 1 - list item - list item - sub list item ## 节点 2 - list item again

MarkRemak 实际上对格式的宽容度很高，即使不使用列表的语法，也会视情况，分割出子节点，如果认为不合适分节点出去的，会作为当前节点的备注，鼠标悬浮时候显示:

## 节点 1 > 这是引用这里内容比较多，是其它的 ## 节点 2 - 采用 list - list item2 ## 节点 3 子节点 3.1 子节点 3.2

在 MarkRemap 中，我们基本不用管最终渲染效果，只要专注于内容本身就可以了。如果唯一需要注意的是，节点自动着色的功能，MarkRemap 在渲染一个节点的时候，默认是无背景色的，假设这个节点的文本是空格+@@ 结尾的，就会有一个节点自动着色的逻辑，实际效果不错。

导出成 HTML 文件很有用

MarkRemap 可以将整个脑图导出为 PNG 图片，但更有用的是导出为 HTML 文件。 HTML 几乎是万能的格式，而且导出的文件，没有依赖外部的静态资源，如此一来:

通过 iCoud Drive 或者 Dropbox 云端方式的同步，导出的脑图在 iPad 上也可以直接进行操作。如果有自己网站，将 HTML 文件直接放在网站上就能访问了，比如 https://scomper.me/members-map.html 进一步扩展

MarkRemap 的绘制引擎使用的是 D3.js，并且是在 markmap 这个库上重新定制的。

这意味着，拿到最终导出的 HTML，我们还可以按照自己的需要重新控制节点上的一些默认交互。比如下面这段代码，插入到 HTML 页面的末尾，可以默认将所有的 2 级节点收起来。

d3.selectAll('.markmap-node').each(function(d){if(d.children&&d.children.length&&d.depth==2){when_click_dom(d)}})

关于 MarkRemap 的由来

MarkRemap 是由 MarkEditor Pro 版 (SSPAI Store) 中的 Markdown to MindMap 插件独立而来的，它是免费的 App 。在 ME 的插件中，其表现会和 MarkEditor 更契合，也提供了黑暗模式的对应，但 MarkEditor 中并不需要 HTML to MindMap，这个是专门为 MarkRemap 设计的。

MarkEditor 的很多功能，都依赖于一些 License 友好的第三方基础 package。MarkEditor 希望能以恰当的方式回馈于这个生态本身。如果 MarkRemap 对你有帮助，那就太好了。 :)

【本文地址】

公司简介

联系我们